<template>
	<view>
		<view v-for="item in 10" :key="item" class="white-box" @click="goPage('/views/mine/detail')">
			<view class="flex user start">
				<image :src="IMAGE_URL + '/static/login/bg.png'" class="avatar"></image>
				<view>
					<view class="font32 fontbold-500">LR-M</view>
					<view class="time font24">华望城 4小时前</view>
				</view>
			</view>
			<view class="item-content font28">
				入住华望城已经有一段时间了，越来越喜欢这里的氛围！清晨被鸟鸣叫醒，傍晚在花园散步遇到热情的邻居，还能看到孩子们在游乐区欢声笑语
			</view>
			<view class="flex img-list">
				<image v-for="item in 3" :src="IMAGE_URL + '/static/login/bg.png'"></image>
			</view>
			<view class="flex between btn-group font24">
				<view class="flex">
					<i class="iconfont icon-fenxiang font28" style="margin-left: 0;"></i>
					<view>12</view>
				</view>
				<view class="flex">
					<view class="flex">
						<i class="iconfont icon-like font28"></i>
						<view>111</view>
					</view>
					<view class="flex">
						<i class="iconfont icon-star font28"></i>
						<view>434</view>
					</view>
					<view class="flex">
						<i class="iconfont icon-comment font28"></i>
						<view>1212</view>
					</view>
				</view>
			</view>
			<view class="flex start comment font24">
				Hi! 说点什么吧
			</view>
		</view>
	</view>
</template>

<script>
import appConfig from '@/config/app.js'
export default {
	data() {
		return {
			IMAGE_URL: appConfig.IMAGE_URL,
		}
	}
}
</script>

<style scoped lang="scss">
	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 28rpx;
		box-sizing: border-box;
		margin-top: 28rpx;

		.user {
			color: $uni-text-color;

			.avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.time {
				color: $uni-text-color-grey;
				margin-top: 8rpx;
			}
		}

		.item-content {
			color: $uni-text-color;
			margin: 28rpx 0;
		}

		.img-list {
			flex-wrap: wrap;

			image {
				width: calc((100% - 44rpx) / 3);
				height: 220rpx;
				border-radius: 16rpx;
				margin-right: 22rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}

		.btn-group {
			color: $uni-text-color;
			margin-top: 30rpx;

			.iconfont {
				margin: 0 4rpx 0 28rpx;
			}
		}

		.comment {
			height: 68rpx;
			background: #F6F6F6;
			border-radius: 16rpx;
			color: $uni-text-color-grey;
			margin-top: 30rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
		}
	}
</style>